import React, {Component} from 'react'
import {Text, View, StyleSheet, Button, Image, FlatList, ScrollView, Platform, StatusBar} from 'react-native'
import {Actions} from "react-native-router-flux";
import {miWhite} from "../../style/constant";
import ScrollableTabView from 'react-native-scrollable-tab-view';
import styles, {HUNDRED_PERCENT, screenHeight} from "../../style";
import CategoryBar from "../../component/widget/CategoryBar";
import Category from "../../component/page/main/category";
import {SearchBar} from "react-native-elements";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../store";
import SearchNavBar from "../../component/widget/SearchNavBar";
import {afterAnimation} from "../../util";
import EmptyTip from "../../component/common/EmptyTip";


interface MainProps extends Store {

}

interface MainState {
}

@inject("main")
@observer
export default class Main extends Component<MainProps, MainState> {


    async componentDidMount() {
        afterAnimation(async () => {
            await this.props.main.getCategories();

        });
    }

    get categoryIsEmpty() {
        return !this.props.main.categories.length;
    }

    render() {
        return (
            <View style={MainStyles.container}>
                {this.categoryIsEmpty ? <EmptyTip style={{marginTop: 30}}/> : <ScrollableTabView
                    locked={true}
                    style={MainStyles.topTabContainer}
                    prerenderingSiblingsNumber={2}
                    renderTabBar={() => <CategoryBar separatorMargin={8} activeTextColor={"#629B36"}
                                                     inactiveTextColor={"#333333"} style={{height: 27}}
                                                     itemWidth={95} textStyle={{fontSize: 16}}
                                                     underlineStyle={{backgroundColor: "#629B36", height: 2}}/>}>
                    {this.props.main.categories.map((data, index) => {
                        return <Category index={index} key={data.id} categoryId={data.id} tabLabel={data.name}/>
                    })}
                </ScrollableTabView>}
            </View>
        )
    }
}


const MainStyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
    },
    topTabContainer: {
        ...Platform.select({
            //ios上该控件可以被子组件顶开高度 android上却不行 后面再想办法 先设定个固定高度
            ios: {},
            android: {
                flex: 1,
            }
        })
    }
});
